<script setup>
import {DFT_ICONS} from "@jzl/icons";

const istyle = defineModel()
const props = defineProps({
  // istyle: Object,
  eleDef: Object,
  currentItemElCode: String
})
</script>

<template>
  <div class="ele-prop-item">
    <el-form label-width="60px" size="mini" label-position="top" v-if="istyle">
      <el-form-item label="">
        <el-radio-group v-model="istyle.shadowType">
          <el-radio-button label="default" v-tippy content="默认">
            <JIcon :icon="DFT_ICONS.initialize"/>
          </el-radio-button>
          <el-radio-button label="none" v-tippy content="清空">
            <JIcon :icon="DFT_ICONS.none"/>
          </el-radio-button>
          <el-radio-button label="custom" v-tippy content="自定义">
            <JIcon :icon="DFT_ICONS.custom"/>
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <template v-if="istyle.shadowType === 'custom'">
        <el-form-item label="水平偏移">
          <template #label>
            <div class="w-full flex justify-between">
              <span>水平偏移</span>
              <el-input-number
                v-model="istyle.shadowH"
                size="small"
                :min="-100"
                :max="100"
                class="pure-lack w-20"
                controls-position="right"
              />
            </div>
          </template>
          <el-slider
            v-model="istyle.shadowH"
            class="w-full"
            input-size="small"
            height="20"
            size="small"
            :min="-100"
            :max="100"
          />
        </el-form-item>
        <el-form-item label="垂直偏移">
          <template #label>
            <div class="w-full flex justify-between">
              <span>垂直偏移</span>
              <el-input-number
                v-model="istyle.shadowV"
                size="small"
                :min="-100"
                :max="100"
                class="pure-lack w-20"
                controls-position="right"
              />
            </div>
          </template>
          <el-slider
            v-model="istyle.shadowV"
            input-size="mini"
            height="20"
            size="mini"
            :min="-100"
            :max="100"
          />
        </el-form-item>
        <el-form-item label="模糊距离">
          <template #label>
            <div class="w-full flex justify-between">
              <span>模糊距离</span>
              <el-input-number
                v-model="istyle.shadowBlur"
                size="small"
                :min="0"
                :max="100"
                class="pure-lack w-20"
                controls-position="right"
              />
            </div>
          </template>
          <el-slider
            v-model="istyle.shadowBlur"
            input-size="mini"
            height="20"
            size="small"
            :min="0"
            :max="100"
          />
        </el-form-item>
        <el-form-item label="模糊大小">
          <template #label>
            <div class="w-full flex justify-between">
              <span>模糊大小</span>
              <el-input-number
                v-model="istyle.shadowSpread"
                size="small"
                :min="0"
                :max="100"
                class="pure-lack w-20"
                controls-position="right"
              />
            </div>
          </template>
          <el-slider
            v-model="istyle.shadowSpread"
            input-size="mini"
            height="20"
            size="mini"
            :min="0"
            :max="100"
          />
        </el-form-item>
        <el-form-item label="颜色">
          <ColorPicker v-model="istyle.shadowColor" size="small"></ColorPicker>
        </el-form-item>
        <el-form-item label="内测阴影">
          <el-switch v-model="istyle.shadowInset"></el-switch>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>
